

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Dice Machine - GM-view</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<link type="text/css" href="gm.css" rel="stylesheet" />	
	<link type="text/css" href="css/ui-lightness/jquery-ui-1.8rc3.custom.css" rel="stylesheet" />	
	<link rel="stylesheet" type="text/css" href="js/mbtooltip/css/mbTooltip.css" title="style1"  media="screen">
	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8rc3.custom.min.js"></script>
	<script type="text/javascript">
		var player_lookup={1:'Joni', 2:'Hallu', 3:'Pette'};
		
		var user_id=4;
		var last_msg=0;
		var message=new Array(); 
			/*server message package - stuff sent to server on 1 sec interval
			structure as follows
			message=
				[	
					message, 
					sender (user id), 
					receiver (user id or NULL when sent to all)
					type (is it a message or metadata)
				]
				
			
			*/
		$(function() {
			$("span.spell_desc").live('mouseenter',function(){
				var desc=$(this).attr('tooltip');
				var div=$('<div class="spell_desc">'+desc+'</div>');
				//console.log(div);
				$('body').append(div);
				var pos=$(this).position();
				//console.log(pos);
				div.css({'top': pos.top, 'left':'5px', 'position':'absolute', 'border':'1px solid black', 'background-color':'#E5E5E5'})
				
			});
			$("span.spell_desc").live('mouseout',function(){
				$('div.spell_desc').remove();
			});
			
			$("#tabs").tabs().find(".ui-tabs-nav").sortable({axis:'x'});
			
			$(".chatwrite").keypress(function(event){ //triggors on Enter
				if (event.keyCode==13){
					//write_to_chat_box($(this).prev(),$(this).val());
					var message={
						message: $(this).val(),
						sender: user_id,
						receiver: $(this).prev().attr("id")
					}
					$(this).val("");		
					send(message);
				}	
			});
			$("#error").ajaxError(function(){
				$(this).text("error");
			});
			
			$("#send_damage").click(function(){
				var message={
					message: $(this).prev().val(),
					sender: user_id,
					receiver: $(this).parent().prev().prev().attr("id"),
					type: 2
				}
				send(message);
				
				message.message= player_lookup[message.receiver] + " just received "+message.message+" damage";
				message.type=1;
				message.receiver=0;
				send(message);
				
				$(this).prev().val('');
			});
			
			$("#private_roll").click(function(){
				//Meta request for UI
				var message={
					message: $(this).prev().val(),
					sender: user_id,
					receiver: $(this).parent().prev().prev().prev().attr("id"),
					type: 3
				}
				send(message);
				
				//Chat message for user
				message.type=1;
				message.message="<b>Private roll requested: "+message.message+"</b>";
				
				send(message);
				
				$(this).prev().val('');
				
			});
			
			load_messages();
			setInterval(load_messages, 3000);			
		});
		
		
		function write_to_chat_box(chatbox, text){
			chatbox=$(chatbox);
			chatbox.append(text+"<br/>");
			chatbox.animate({ //moves the div-scroller to bottom
				scrollTop: chatbox.attr("scrollHeight") - chatbox.height() 
						}
			, 100);
		}
		
		function throw_dice(element, dice){
			element=$(element).parent();
			for (i=0; i<4; i++){
				element=$(element).next();
				$(element).html(Math.floor(Math.random()*dice)+1);
			}
		}
		function throw_m_dice(element, dice, amount){
			var avg=0;
			var total=0;

			$(".massroll").each(function(){
				$(this).html("");
				});
			element=$(element).parent().parent();
			
			for (i=0; i<amount; i++){
				
				var res=Math.floor(Math.random()*dice)+1;
				element=$(element).next();
				$(element).html(res);
				total=Number(total)+Number(res);
			}
			//console.log("Dice:"+dice, "AVG:"+avg, "Tot:"+total);
			var avg=Number(total)/Number(amount);
			element=$(element).next();
			$(element).html("<span class=\"bold\">"+total+"</span>");
			element=$(element).next();
			$(element).html("<span class=\"red\">"+avg.toFixed(1)+"</span>");
			
				
		}
		function send(message){
			$.post("save_message.php", message);
		}
		function load_messages(){
			$.post(	"load_messages.php", 
					{user_id: user_id, last_msg: last_msg}, 
					function(data){
						$.each(data, function(index, value){
							last_msg=value.message_id;
							value.message=value.message.replace('\"','"');
							if (value.type!=1){
								switch (value.type){
									default: break;
								}
										
							}
							else{
								if (value.receiver==0){
									var text="<span class=\"name\">"+value.p_name+"</span><span class=\"time\">"+value.time+"</span>"+value.message;
									write_to_chat_box($(".pastebin"), text);
								}
								if (value.sender==user_id){
									var text="<span class=\"time\">"+value.time+"</span>"+value.message;
									write_to_chat_box($("#"+value.receiver), text);
								}
								else{
									var text="<span class=\"time\">"+value.time+"</span>"+value.message;
									write_to_chat_box($("#"+value.sender), text);
								}
							}
						});
					}, 
					"json");
		}
	</script>
	
</head>

<body style='font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;'>
<div id="error"></div>
<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Quick roll</a></li>
		<li><a href="#tabs-2">Joni</a></li>
		<li><a href="#tabs-3">Hallu</a></li>
		<li><a href="#tabs-4">Pette</a></li>
	</ul>
	<div id="tabs-1">
		<div id="quick_rolls"><h3>Quick Rolls</h3>
		<table class="col">
			<tr>
				<td></td>
				<td></td>
				<td class="small">Joni</td>
				<td class="small">Hallu</td>
				<td class="small">Pette</td>
			</tr>
			<tr>
				<td>Spot:</td>
				<td><button>Roll</button></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>Listen:</td>
				<td><button>Roll</button></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>Will save:</td>
				<td><button>Roll</button></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>Fort save:</td>
				<td><button>Roll</button></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>Ref save:</td>
				<td><button>Roll</button></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
		<table class="col">
			<tr>
				<td>1d4</td>
				<td><button onClick="throw_dice(this, 4)">Roll</button></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>1d6</td>
				<td><button onClick="throw_dice(this, 6)">Roll</button></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>1d8</td>
				<td><button onClick="throw_dice(this, 8)">Roll</button></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>1d10</td>
				<td><button onClick="throw_dice(this, 10)">Roll</button></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>1d12</td>
				<td><button onClick="throw_dice(this, 12)">Roll</button></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>1d20</td>
				<td><button onClick="throw_dice(this, 20)">Roll</button></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>1d100</td>
				<td><button onClick="throw_dice(this, 100)">Roll</button></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
		<table class="col">
			<tr>
				<td>
					<select>
						<option onClick="throw_m_dice(this, 4, 2)">2d4</option>
						<option onClick="throw_m_dice(this, 4, 3)">3d4</option>
						<option onClick="throw_m_dice(this, 4, 4)">4d4</option>
						<option onClick="throw_m_dice(this, 4, 5)">5d4</option>
						<option onClick="throw_m_dice(this, 4, 6)">6d4</option>
						<option onClick="throw_m_dice(this, 4, 7)">7d4</option>
						<option onClick="throw_m_dice(this, 4, 8)">8d4</option>
						<option onClick="throw_m_dice(this, 4, 9)">9d4</option>
						<option onClick="throw_m_dice(this, 4, 10)">10d4</option>
					</select>
				</td>
				<td class="massroll"></td>
				<td class="massroll"></td>
				<td class="massroll"></td>
				<td class="massroll"></td>
				<td class="massroll"></td>
				<td class="massroll"></td>
				<td class="massroll"></td>
				<td class="massroll"></td>
				<td class="massroll"></td>
				<td class="massroll"></td>
				<td class="massroll"></td>
				<td class="massroll"></td>
				
			</tr>
			<tr>
				<td>
					<select>
						<option onClick="throw_m_dice(this, 6, 2)">2d6</option>
						<option onClick="throw_m_dice(this, 6, 3)">3d6</option>
						<option onClick="throw_m_dice(this, 6, 4)">4d6</option>
						<option onClick="throw_m_dice(this, 6, 5)">5d6</option>
						<option onClick="throw_m_dice(this, 6, 6)">6d6</option>
						<option onClick="throw_m_dice(this, 6, 7)">7d6</option>
						<option onClick="throw_m_dice(this, 6, 8)">8d6</option>
						<option onClick="throw_m_dice(this, 6, 9)">9d6</option>
						<option onClick="throw_m_dice(this, 6, 10)">10d6</option>
					</select>
				</td>
				<td class="massroll"></td>
				<td class="massroll"></td>
				<td class="massroll"></td>
				<td class="massroll"></td>
				<td class="massroll"></td>
				<td class="massroll"></td>
				<td class="massroll"></td>
				<td class="massroll"></td>
				<td class="massroll"></td>
				<td class="massroll"></td>
				<td class="massroll"></td>
				<td class="massroll"></td>
				
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
		</div>
		
		<div class="chatbox_container">
		<div class="col">
			Joni<br>
			<div id="1" class="chatbox">
			</div>
			<input class="chatwrite"/>
			<p/>Inflict PAIN: <input size="3"/><button id="send_damage">Send</button>
			<p/><input size="15"><button id="private_roll">Ask for private roll</button>
		</div>
		<div class="col">
			Hallu<br/>
			<div id="2" class="chatbox">
			</div>
			<input class="chatwrite"/>
			<p/>Inflict PAIN: <input size="3"/><button>Send</button>
			<p/><input size="15"><button>Ask for private roll</button>
		</div>
		<div class="col">
			Pette<br/>
			<div id="3" class="chatbox">
			</div>
			<input class="chatwrite"/>
			<p/>Inflict PAIN: <input size="3"/><button>Send</button>
			<p/><input size="15"><button>Ask for private roll</button>
		</div>
		<div class="col">
			Chatbox<br/>
			<div id="NULL" class="chatbox pastebin">
			</div>
			<input class="chatwrite"/>			
		</div>
		<div>
		<!--<p/>.-->
	</div>
	<div id="tabs-2">
	Blah
	</div>
	<div id="tabs-3">
	Blah
	</div>
	<div id="tabs-4">
	Blah
	</div>

</div>
</body>
</html>
